<template>
  <div class="store-front">
    <el-card class="store-card">
      <template #header>
        <div class="card-header">
          <h3>店铺前端展示</h3>
          <el-button type="primary" size="small">预览店铺</el-button>
        </div>
      </template>
      
      <div class="store-preview">
        <div class="store-info">
          <div class="store-cover">
            <el-image 
              src="https://via.placeholder.com/400x200" 
              fit="cover"
              class="store-image"
            />
          </div>
          
          <div class="store-details">
            <h4 class="store-name">{{ storeName }}</h4>
            <div class="store-rating">
              <el-rate v-model="storeRating" disabled text-color="#ff9900" />
              <span class="rating-value">{{ storeRating.toFixed(1) }}</span>
              <span class="review-count">({{ reviewCount }}条评价)</span>
            </div>
            <div class="store-meta">
              <span><el-icon><LocationFilled /></el-icon> {{ storeAddress }}</span>
            </div>
            <div class="store-meta">
              <span><el-icon><Phone /></el-icon> {{ storePhone }}</span>
            </div>
            <div class="store-badges">
              <el-tag size="small" type="success">{{ storeType }}</el-tag>
              <el-tag size="small" type="warning" v-if="isFeatured">特色商家</el-tag>
              <el-tag size="small" type="info" v-if="deliveryTime">{{ deliveryTime }}分钟送达</el-tag>
            </div>
          </div>
        </div>
        
        <el-divider />
        
        <div class="section-title">店铺公告</div>
        <div class="store-notice">{{ storeNotice }}</div>
        
        <el-divider />
        
        <div class="section-title">热门商品</div>
        <div class="popular-products">
          <el-row :gutter="20">
            <el-col :span="8" v-for="product in popularProducts" :key="product.id">
              <div class="product-card">
                <el-image 
                  :src="product.image" 
                  fit="cover"
                  class="product-image"
                />
                <div class="product-info">
                  <div class="product-name">{{ product.name }}</div>
                  <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
                  <div class="product-sales">月售 {{ product.sales }}+</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LocationFilled, Phone } from '@element-plus/icons-vue'

// 店铺基本信息
const storeName = ref('示例餐厅')
const storeRating = ref(4.8)
const reviewCount = ref(256)
const storeAddress = ref('北京市朝阳区三里屯街道工体北路8号')
const storePhone = ref('13800138000')
const storeType = ref('中式快餐')
const isFeatured = ref(true)
const deliveryTime = ref(30)
const storeNotice = ref('欢迎光临本店！本店所有菜品均由新鲜食材制作，专注健康美食。营业时间：10:00-22:00，欢迎品尝！')

// 热门商品
const popularProducts = ref([
  {
    id: 1,
    name: '招牌炒饭',
    price: 22.00,
    sales: 500,
    image: 'https://via.placeholder.com/150'
  },
  {
    id: 2,
    name: '麻辣香锅',
    price: 48.00,
    sales: 320,
    image: 'https://via.placeholder.com/150'
  },
  {
    id: 3,
    name: '红烧牛肉面',
    price: 28.00,
    sales: 480,
    image: 'https://via.placeholder.com/150'
  }
])
</script>

<style scoped>
.store-front {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.store-preview {
  padding: 0 10px;
}

.store-info {
  display: flex;
  margin-bottom: 20px;
}

.store-cover {
  width: 200px;
  margin-right: 20px;
}

.store-image {
  width: 100%;
  height: 120px;
  border-radius: 8px;
}

.store-details {
  flex: 1;
}

.store-name {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-value {
  margin-left: 8px;
  font-weight: bold;
  color: #ff9900;
}

.review-count {
  margin-left: 5px;
  color: #999;
  font-size: 12px;
}

.store-meta {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

.store-meta .el-icon {
  margin-right: 5px;
  vertical-align: middle;
}

.store-badges {
  margin-top: 10px;
}

.store-badges .el-tag {
  margin-right: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}

.store-notice {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  color: #606266;
  margin-bottom: 20px;
}

.popular-products {
  margin-top: 15px;
}

.product-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-image {
  width: 100%;
  height: 120px;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-sales {
  font-size: 12px;
  color: #999;
}
</style> 